<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>商城列表页（移动端）</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="../css/list.css"/>
</head>
<body>
<!--行头搜索栏-->
<header flex="main:justify cross:center">
    <input type="text" placeholder="搜索商家，店铺，品牌名。"/>
    搜索

</header>

<!--楼层1-->
<section class="f1">
<ul>
    <li flex="main:center dir:top cross:center">
        <div class="fl_01"></div>
        <p>家用电器</p>
    </li>
    <li flex="main:center dir:top cross:center">
        <div class="fl_02"></div>
        <p>手机数码</p>
    </li>
    <li flex="main:center dir:top cross:center">
        <div class="fl_03"></div>
        <p>电脑办公</p>
    </li>
    <li flex="main:center dir:top cross:center">
        <div class="fl_04"></div>
        <p>家具家纺</p>
    </li>
    <li flex="main:center dir:top cross:center">
        <div class="fl_01"></div>
        <p>女鞋箱包</p>
    </li>
    <li flex="main:center dir:top cross:center">
        <div class="fl_02"></div>
        <p>自营服饰</p>
    </li>

</ul>
</section>



<!--楼层2-->
<section class="f2">
<ul flex>
    <li flex="main:center cross:center">
        <a href="#">综合排序</a>
        <img src="../img/updown.png" alt=""/>
    </li>
    <li flex="main:center cross:center">
        <a href="#">附近商店</a>
    </li>
    <li flex="main:center cross:center">
        <a href="#"> 选择地区</a>
    </li>
</ul>
    
</section>

<!--楼层3:店铺-->
<section class="f3">
<ul>
    <!--未关注-->
    <li>
         <div class="f3_tittle" flex="main:justify cross:center">
             <h1>福州VANS专卖店</h1>
             <img src="../img/jiantou.png" />
         </div>

        <div class="f3_add" flex>
            <img src="../img/cp1.jpg"/>

        <div class="f3_right" flex="main:center dir:top">

           <p>福建省福州市鼓楼区鼓山旁福马路君临东城 沃尔玛4楼</p>

             <div flex="main:justify cross:center">
                <div><span>距离670m</span> <span>关注人数103</span></div>
                 <button type="button">未关注</button>
        </div>


            </div>

        </div>
    </li>
    <!--已关注-->
    <!--<li>-->
    <!--<div class="f3_tittle" flex="main:justify cross:center">-->
        <!--<h1>福州VANS专卖店</h1>-->
        <!--<img src="../img/jiantou.png" />-->
    <!--</div>-->

    <!--<div class="f3_add" flex>-->
        <!--<img src="../img/cp1.jpg"/>-->

        <!--<div class="f3_right" flex="main:center dir:top">-->

            <!--<p>福建省福州市鼓楼区鼓山旁福马路君临东城 沃尔玛4楼</p>-->

            <!--<div flex="main:justify cross:center">-->
                <!--<div><span>距离670m</span> <span>关注人数103</span></div>-->
                <!--<button type="button" class="MM">已关注</button>-->
            <!--</div>-->


        <!--</div>-->

    <!--</div>-->
<!--</li>-->



    <li>
        <div class="f3_tittle" flex="main:justify cross:center">
            <h1>福州潮人服饰</h1>
            <img src="../img/jiantou.png" />
        </div>

        <div class="f3_add" flex>
            <img src="../img/cp2.jpg"/>

            <div class="f3_right" flex="main:center dir:top">

                <p>福建省福州市仓山区六一南路汇达广场旁服 装城103号</p>

                <div flex="main:justify cross:center">
                    <div><span>距离670m</span> <span>关注人数103</span></div>
                    <button type="button" class="MM">已关注</button>
                </div>


            </div>

        </div>
    </li>
    <li>
        <div class="f3_tittle" flex="main:justify cross:center">
            <h1>福州VANS专卖店</h1>
            <img src="../img/jiantou.png" />
        </div>

        <div class="f3_add" flex>
            <img src="../img/cp3.jpg"/>

            <div class="f3_right" flex="main:center dir:top">

                <p>福建省福州市鼓楼区鼓山旁福马路君临东城 沃尔玛4楼</p>

                <div flex="main:justify cross:center">
                    <div><span>距离670m</span> <span>关注人数103</span></div>
                    <button type="button">未关注</button>
                </div>


            </div>

        </div>
    </li>
    <li>
        <div class="f3_tittle" flex="main:justify cross:center">
            <h1>福州水密码专卖店</h1>
            <img src="../img/jiantou.png" />
        </div>

        <div class="f3_add" flex>
            <img src="../img/cp1.jpg"/>

            <div class="f3_right" flex="main:center dir:top">

                <p>福建省福州市仓山区六一南路汇达广场旁服 装城103号</p>

                <div flex="main:justify cross:center">
                    <div><span>距离670m</span> <span>关注人数103</span></div>
                    <button type="button">未关注</button>
                </div>


            </div>

        </div>
    </li>
</ul>

</section>















<script>
    document.body.addEventListener('touchstart', function (){});
</script>

</body>
</html>